<template>
	<view class="index-box" :style="{ '--color': vuex_config.themeColor1, '--price': vuex_config.price }">
		<!-- 快递地址 -->
		<sww-wx-address></sww-wx-address>
		<!-- 自提地址 -->
		<!-- <pick-up-com ref="pick_up_view" @changPick="changPick"></pick-up-com> -->
		<view class="box">
			<!--  规格信息 -->
			<view class="prod_item">
				<view class="img"><image :src="prodForm.product_img"></image></view>
				<view class="prod_cont">
					<view class="u-line-2">{{ prodForm.product_name }}</view>
					<view class="u-line-2 stand_name">{{ prodForm.standard }}</view>
				</view>
				<view class="static_box">
					<view class="price">￥{{ prodForm.price }}</view>
					<view class="num">x {{ prodForm.num }}</view>
				</view>
			</view>
			<template v-if="checkPick">
				<view class="cell_item">
					<view>收货人</view>
					<input placeholder="请输入收货人姓名" class="cell_center" type="text" v-model="pickAddress.name" />
					<view class="iconfont iconfont-e775"></view>
				</view>
				<view class="cell_item">
					<view>手机号</view>
					<input placeholder="请输入联系电话" class="cell_center" type="number" v-model="pickAddress.mobile" />
					<view class="iconfont iconfont-e775"></view>
				</view>
			</template>
			<order-cell ref="order_cell" :checkPick="checkPick" :prodPostage="amount"></order-cell>
		</view>
		<!-- 支付方式 -->
		<view class="box"><sww-pay-type v-model="dataForm.pay_type" :price="totalPrice"></sww-pay-type></view>
		<sww-goods-action>
			<view class="sub-price">
				<text class="">合计：</text>
				<text class="all_price_sign">￥</text>
				<text class="all_price_num">{{ $price(totalPrice) }}</text>
			</view>
			<view class="sub-btn" @click="onSubmit">提交订单</view>
		</sww-goods-action>
	</view>
</template>
<script>
import { payOrder } from '@/mixins/payOrder';
import orderCell from '@/package/product/components/orderConfirm/orderCell.vue';
import { isMobile } from '@/utils/validate.js';
// import pickUpCom from '@/package/product/components/pickupComponent.vue';
import { mapState } from 'vuex';
// import { localPostage } from '@/mixins/localPostage';
import { wxConfig } from '@/mixins/wxConfig';
export default {
	mixins: [payOrder, wxConfig],
	components: {
		orderCell,
		// 'pick-up-com': pickUpCom
	},
	data() {
		return {
			order_type: 1,
			dataForm: {
				pay_type: '1' // 支付方式
			},
			checkPick: false, // 是否选择了自提地址
			pickAddress: {
				name: '',
				mobile: ''
			},
			prodCount: 0,
			prodForm: {},
			prodPostage: 0, // 运费
			prodPostMsg: '', // 运费提示消息
			amount:0,// 红包要求支付的费用
			receiveId: 0, // 领取id
			envelopeId: 0, // 红包id
			postageObj: {}
		};
	},
	computed: {
		...mapState(['vuex_address']),
		totalPrice() {
			// 订单待支付金额,选了快递地址，就不算邮费进去
			let price = this.amount + (this.checkPick ? 0 : this.prodPostage)
			return price >= 0 ? price : 0;
		}
	},
	watch: {
		vuex_address: {
			handler(val) {
				if (val) {
					this.resetPostage();
				}
			}
		}
	},
	onLoad(options) {
		// #ifdef H5
		// h5需要先获取支付和地址的配置
		this.$loading();
		this.initWxConfig(['chooseWXPay', 'openAddress'])
			.then(() => {
				this.$hide();
			})
			.catch(() => this.$hide());
		// #endif
		this.receiveId = Number(options.receiveId);
		this.envelopeId = Number(options.envelopeId);
		this.initPage();
	},
	onShow() {
		// this.$nextTick(() => {
		// 	this.$refs.pick_up_view.$show();
		// });
	},
	methods: {
		initPage() {
			// 根据红包id获取红包详情和商品详情
			this.$loading();
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2].$vm;
			this.prodForm = {
				...prevPage.orderProdObj
			};
			this.onTransmission();
		},
		// 处理下单数据
		onTransmission() {
			this.amount = this.prodForm.amount || 0
			this.prodCount = this.prodForm.num; // 要根据详情接口返回计算出来
			// this.resetPostage();
			// 看看是否有自提地址
			// this.$refs.pick_up_view.getPickupList(this.prodForm.product_id);
			this.$hide();
		},
		// 计算运费
		resetPostage() {
			// let postageObj = this.$getPostage(this.prodCount, this.prodForm.express_num, this.prodForm.express_price, this.prodForm.product_freight, this.prodForm.price);
			// this.prodPostage = postageObj.price; // 运费
			// this.prodPostMsg = postageObj.msg || '';
		},
		// 自提选择发生变化
		changPick(val) {
			this.checkPick = val;
		},
		// 提交表单
		onSubmit() {
			this.$u.debounce(
				() => {
					if (this.checkPick) {
						if (!this.pickAddress.name) {
							this.$toast('请输入联系人名称');
							return;
						} else if (!isMobile(this.pickAddress.mobile)) {
							this.$toast('请正确输入联系方式');
							return;
						}
					} else {
						if (!this.vuex_address) {
							this.$toast('请选择收货地址');
							return;
						}
						// 当前地址是否在配送区域 localPostage
						// if (!this.$checkCanBuyFromPostageModule()) return;
					}

					let arr = [
						{
							fk_pro_id: this.prodForm.product_id,
							fk_stock_id: this.prodForm.fk_attr_id,
							num: this.prodForm.num,
							name: this.prodForm.standard,
							price: this.prodForm.price
						}
					];
					let params = {
						remark: this.$refs.order_cell.remark || '',
						type: 1, // 是否清理用户购物车 1-不清理 2-清理
						postage: this.checkPick ? 0 : this.prodPostage, // 邮费
						total_amount: this.totalPrice, // 订单总金额
						coupon_id: '0',
						coupon: '0',
						json_detailed: JSON.stringify(arr)
					};
					params.remark += `;红包ID：${this.envelopeId};领取ID：${this.receiveId}`;
					if (this.checkPick) {
						let pickForm = this.$refs.pick_up_view.pickForm;
						params = {
							...params,
							...this.pickAddress,
							address: `[自提]${pickForm.name} ${pickForm.address}`
						};
					} else {
						params = {
							...params,
							...this.vuex_address
						};
					}
					this._submitOrder(params, {
						totalPrice: params.total_amount,
						pay_type: this.dataForm.pay_type,
						order_type: this.order_type
					})
						.then(() => {})
						.catch(() => {});
				},
				1000,
				true
			);
		},
		createFinishSuccess(order_no) {
			// 使用掉红包
			this.$resPost('AddUsersRedRecord', {
				receive_id: this.receiveId,
				mode: 1,
				num: this.prodForm.num,
				title: `兑换商品id：${this.prodForm.product_id}`,
				order_no: order_no,
				relay_num: 0
			});
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.index-box {
	width: 100%;

	.cell_item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		height: 60rpx;
		box-sizing: content-box;

		.cell_center {
			flex: 1;
			overflow: hidden;
			text-align: right;
			color: #999;
		}

		.iconfont {
			color: #666;
			margin-left: 8rpx;
			position: relative;
		}
	}

	.box {
		width: 100%;
		padding: 0 24rpx;
		background-color: #ffffff;
		margin-bottom: 10rpx;
	}
	.prod_item {
		display: flex;
		padding-top: 30rpx;
		.img {
			width: 150rpx;
			height: 150rpx;
			margin-right: 20rpx;
		}
		.prod_cont {
			flex: 1;
			overflow: hidden;
			font-size: 28rpx;
			padding-top: 10rpx;
			.stand_name {
				margin-top: 10rpx;
			}
		}
		.static_box {
			padding-top: 10rpx;
			margin-left: 20rpx;
			.price {
				color: var(--color);
			}
			.num {
				color: #8C8888;
				margin-top: 10rpx;
			}
		}
	}
	.sub-price {
		padding-left: 30rpx;
		font-size: 32rpx;

		.all_price_sign {
			color: var(--price);
			font-size: 30rpx;
		}

		.all_price_num {
			font-size: 40rpx;
			color: var(--price);
		}
	}

	.sub-btn {
		width: 250rpx;
		height: 100rpx;
		background: var(--color);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 30rpx;
		margin-left: auto;
	}
}
</style>
